import React, { useState, useEffect } from 'react';
import { FileFilled } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import { Tooltip } from 'antd';
import { useRequest, useWebSocket } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
//  /** 170=等待刷卡中 */

let dip = {
  0: {
    title: '空闲',
    color: '#40D851',
  },
  1: {
    title: '充电中',
    color: 'lightblue',
  },
  2: {
    title: '未充占用',
    color: '#BC12ED',
  },
  3: {
    title: '充满占用',
    color: '#0103FD',
  },
  4: {
    title: '端口故障',
    color: '#E40C00',
  },
  5: {
    title: '浮充',
    color: '#06F9E0',
  },
  88: {
    title: '绑定端口',
    color: '#ffac93',
  },
  99: {
    title: '端口禁用',
    color: '#400000',
  },
  170: {
    title: '等待刷卡中',
    color: '#ff4800',
  },
  6: {
    title: '存储器损坏',
    color: '#005BAC',
  },
  7: {
    title: '安全门卡住',
    color: '#d3ac2b',
  },
  8: {
    title: '接触不良或保险丝烧断',
    color: '#009DA2',
  },
  9: {
    title: '继电器粘连',
    color: '#ee45e4',
  },
  10: {
    title: '霍尔芯片损坏',
    color: '#FDF204',
  },
};

function Lift() {
  const [floor, setfloor] = useState({
    a: '1',
    b: '1',
    c: '1',
  });
  let { data } = useRequest(() => {
    return getFetch({ url: '/vehicle-api/lift' });
  });
  useEffect(() => {
    let ws = new WebSocket('ws://service.hengyuanyunti.com:12345/ws');

    ws.onopen = function () {
      ws.send(
        JSON.stringify({
          test: '连接sockt',
          registryCode: '31104403002020035120',
          type: 'monitor',
          withCredentials: true,
        }),
      );
      ws.send(
        JSON.stringify({
          test: '连接sockt',
          registryCode: '30104403001996080729',
          type: 'monitor',
          withCredentials: true,
        }),
      );
      ws.send(
        JSON.stringify({
          test: '连接sockt',
          registryCode: '30104403001996080733',
          type: 'monitor',
          withCredentials: true,
        }),
      );
    };

    ws.onmessage = function (e) {
      let res = JSON.parse(e.data);
      if (res.registryCode == '31104403002020035120' && res.f != floor.a && floor.a != '') {
        setfloor((floors) => ({
          ...floors,
          a: res.f,
        }));
      }
      if (res.registryCode == '30104403001996080729' && res.f != floor.b && floor.b != '') {
        setfloor((floors) => ({
          ...floors,
          b: res.f,
        }));
      }
      if (res.registryCode == '30104403001996080733' && res.f != floor.c && floor.c != '') {
        setfloor((floors) => ({
          ...floors,
          c: res.f,
        }));
      }
    };
    return ws;
  }, []);

  return (
    <div>
      <p className="title" style={{ marginBottom: 24 }}>
        <span>
          <IconFont type="icon-dianti" style={{ paddingRight: 6 }} />
          电梯监管
        </span>
      </p>

      <div style={{ display: 'flex' }}>
        {data?.data &&
          data?.data.map((it, i) => {
            return (
              <div
                key={i}
                className="img dt"
                style={{
                  width: 205,
                  height: 290,
                  backgroundImage: `url(${require('@/assets/dt.png')})`,
                  position: 'relative',
                  marginRight: 12,
                }}
              >
                <Tooltip title="网关">
                  <img src={require('@/assets/icon1.png')} alt="" />
                </Tooltip>
                <Tooltip title="监测仪">
                  <img src={require('@/assets/icon2.png')} alt="" />
                </Tooltip>
                <Tooltip title="智能屏">
                  <img src={require('@/assets/icon3.png')} alt="" />
                </Tooltip>
                <p>{floor[i == 0 ? 'a' : i == 1 ? 'b' : 'c']}</p>

                <div className="textbg">
                  <p>{it.registryCode}</p>
                  <p>{it.address}</p>
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}

export default Lift;
